<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数: 16 条</span>
        </template>
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/import')">excel导入</el-button>
          <el-button type="danger" size="small">excel导出</el-button>
          <el-button type="primary" size="small" @click="showDialog = true">新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px;">
        <el-table border :data="list" border:default-sort="{prop: 'workNumber'}">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式">
            <template slot-scope="scope">
              {{ formatEmployment(scope.row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" sortable prop="timeOfEntry" />
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">分配角色</el-button>
              <el-button type="text" size="small" @click="delFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :total="total"
            :page-size="pageParams.size"
            layout="prev, pager, next"
            @current-change="hCurrentChange"
          />
        </el-row>
      </el-card>
      <!-- 新增页面 -->
      <el-dialog
        title="新增员工"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="hCloseDialog"
      >
        <addor-edit
          ref="AddEmployee"
          @close="showDialog = false"
          @changeEmployees="cemployees"
        />
      </el-dialog>
    </div>

  </div>
</template>
<script>
import { getEmployeeList, delEmployee } from '@/api/employees'
import EmployeeEnum from '@/constant/employees'
import addorEait from './empDialog'

const hireType = { }
EmployeeEnum.hireType.forEach(item => {
  hireType[item.id] = item.value
})
console.log('hireType', hireType)
export default {
  name: 'Employees',
  // 2. 注册-局部组件
  components: {
    // PageTools
    'addor-edit': addorEait
  },
  data() {
    return {
      list: [],
      total: 0,
      pageParams: {
        page: 1,
        size: 5
      },
      showDialog: false
    }
  },
  created() {
    this.setEmployeeList()
  },
  methods: {
    async setEmployeeList() {
      try {
        // 将条件pageParms请求返回要的每页条数rows和total
        const res = await getEmployeeList(this.pageParams)
        console.log(res)
        this.list = res.data.rows
        this.total = res.data.total
      } catch (err) {
        console.log(err)
        this.$message.err('加载用户信息失败')
      }
    },
    formatEmployment(id) {
    // 对后端返回的类型的编码进行翻译 ，还原成 中文
      // const rs = EmployeeEnum.hireType.find(item => item.id === id)
      // return rs.value
      return hireType[id]
    },
    hCurrentChange(Pages) {
      // 切换页面时获取的页数赋予给page属性
      this.pageParams.page = Pages
      // 再次请求页面
      this.setEmployeeList()
    },
    async doDel(id) {
      try {
        const rs = await delEmployee(id)
        console.log(rs)
        this.$message.success('删除成功')
        if (this.list.length === 1) {
          this.pageParams.page--
        }
        if (this.list.length <= 0) {
          this.pageParams.page = 1
        }
        this.setEmployeeList()
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    delFn(id) {
      console.log(id)
      this.$confirm('此操作将永久删除部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 做删除
        this.doDel(id)
      }).catch(() => {

      })
    },
    cemployees() {
      this.showDialog = false
      this.setEmployeeList()
    },
    // 关闭弹层
    // 1. 在表单中点击取消（添加成功）
    // 2. 弹层上点击 X
    hCloseDialog() {
      // 相当于是在父组件中去执行子组件中方法
      // 去清空 子组件中的表单数据和校验结果
      // 子组件.resetForm()
      // console.log('在父组件中获取子组件的引用', this.$refs.AddEmployee)
      this.$refs.AddEmployee.resetForm()
    }

  }
}
</script>
